<template>
  <div class="dialog">
    <el-dialog
      title="加工附属品添加"
      :visible.sync="showDialog"
      width="45%"
      top="0"
      :close-on-click-modal="false"
      @close="cancel"
    >
      <el-form
        ref="ruleForm"
        label-position="left"
        :model="formData"
        :rules="rules"
        class="el-form"
      >
        <el-row>
          <el-col :span="12">
            <el-form-item label="加工批次:" prop="processBatchNo">
              <el-select
                v-model="formData.processBatchNo"
                style="width: 100%;"
                placeholder="请选择"
                @change="getProduct"
              >
                <el-option
                  v-for="item,index in processBatchList"
                  :key="index"
                  :label="item.processBatchName"
                  :value="item.processBatchNo"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="加工产品:" prop="productMaterialNo">
              <el-select
                v-model="formData.productMaterialNo"
                style="width: 100%;"
                placeholder="请选择"
                disabled
              >
                <el-option
                  v-for="item,index in productionOptions"
                  :key="index"
                  :label="item.name"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="加工附属品:" prop="accessoriesMaterialNo">
              <el-select
                v-model="formData.accessoriesMaterialNo"
                style="width: 100%;"
                placeholder="请选择加工附属品"
              >
                <el-option
                  v-for="item,index in accessoriesMaterialList"
                  :key="index"
                  :label="item.material.materialName"
                  :value="item.materialNo"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12" class="unit">
            <el-form-item
              style="width:75%"
              label="附属品数量:"
              prop="accessoriesQuantity"
              placeholder="请输入加工附属品数量"
            >
              <el-input v-model="formData.accessoriesQuantity" />
            </el-form-item>
            <el-form-item
              style="width:25%"
              prop="accessoriesUnitNo"
              placeholder="单位"
            >
              <el-select
                v-model="formData.accessoriesUnitNo"
                @change="getUnitName"
              >
                <el-option
                  v-for="item,index in unitList"
                  :key="index"
                  :label="item.unitName"
                  :value="item.unitNo"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button class="cancelbtn" @click="cancel()">取 消</el-button>
        <el-button type="primary" class="savebtn" @click="save('ruleForm')">保 存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "AccessoriesAddEditDialog",
  components: {},
  props: {
    formDataCopy: {
      type: Object,
      default: () => {}
    },
    processBatchList: {
      type: Array,
      default: () => []
    },
    unitList: {
      type: Array,
      default: () => []
    },
    accessoriesMaterialList: {
      type: Array,
      default: () => []
    },
    productionOptions: {
      type: Array,
      default: () => {}
    },
    show: {
      type: Boolean,
      default: false
    },
    titleText: {
      type: String,
      default: ''
    },
  },
  data() {
    return {
      showDialog: this.show,
      // 展示
      formData: {
        processBatchNo: "",
        materialNo: "",
        warehousingQuantity: "",
        wastage: "",
        wastageUnitNo: "",
        wastageUnitName: "",
        warehousingUnitName: "",
        warehousingUnitNo: ""
      },
      rules: {
        processBatchNo: [
          {
            required: true,
            message: "请选择批次",
            trigger: ["blur", "change"]
          }
        ],
        accessoriesQuantity: [
          {
            required: true,
            message: "数量不能为空",
            trigger: ["blur", "change"]
          },
          {
            pattern: /^(?!(0[0-9]{0,}$))[0-9]{1,}[.]{0,}[0-9]{0,}$/,
            message: "值为不小于0的数字",
            trigger: ["blur", "change"]
          }
        ],
        accessoriesUnitNo: [
          {
            required: true,
            message: "单位不能为空",
            trigger: ["blur", "change"]
          }
        ],
        accessoriesMaterialNo: [
          {
            required: true,
            message: "加工附属品不能为空",
            trigger: ["blur", "change"]
          }
        ]
      }
    };
  },

  watch: {
    show(v) {
      this.showDialog = v;
    },
    formDataCopy(v) {
      this.formData = { ...this.formData, ...v };
    }
  },
  // beforeCreate() {
  //   this.resetForm("ruleForm");
  // },
  mounted() {},
  methods: {
    // 选择批次获得产品
    getProduct(e) {
      this.processBatchList.forEach(item => {
        if (item.processBatchNo === e) {
          this.formData.processBatchName = item.processBatchName;
          this.$set(this.formData, "productMaterialNo", item.productMaterialNo);
          this.productionOptions.forEach(item1 => {
            if (item1.materialNo === item.productMaterialNo) {
              this.formData.productMaterialName = item1.material.materialName;
            }
          });
        }
      });
    },
    getUnitName(e) {
      this.unitList.forEach(item => {
        if (item.unitNo === e) {
          this.formData.accessoriesUnitName = item.unitName;
        }
      });
    },
    save(formData) {
      this.$refs[formData].validate(valid => {
        if (valid) {
          this.$emit("addEvent", this.formData);
          this.cancel();
        }
      });
    },
    cancel() {
      this.$emit("closeDialog");
      this.$refs.ruleForm.clearValidate();
      this.formData = {};
    }
  }
};
</script>

  <style lang="scss" scoped>
::v-deep .el-form-item__label {
  min-width: 160px !important;
}
.unit {
  display: flex;
}
</style>
